<template>
  <zm-form :model="form" ref="form" :rules="formRule">
    <zm-data-radio
      v-model="form.timeType"
      :list="timeTypeList"
      is-btn
      class="mb20"
      @change="radioChange"
    >
    </zm-data-radio>
    <!-- 指定周期 -->
    <zm-form-item
      class="mb10"
      prop="timeData.week"
      v-if="form.timeType === '2'"
    >
      <zm-checkbox
        v-model="form.timeData.week"
        :list="weekList"
        :option="{ isAllShow: false }"
        @change-choose="handleSetWeekName"
      >
      </zm-checkbox>
    </zm-form-item>
    <!-- for 循环 -->
    <div
      v-for="(item, index) in form.timeData.timeArray"
      :key="index"
      class="mb10"
    >
<time-item :holiday-list="holidayList" :item="item" ref="timeForm" :time-type="form.timeType" @set-holiday-name="(val)=>handleSetName(val,index)">
      <zm-form-item>
        <el-button type="primary" icon="el-icon-plus" @click="add(index)" />
        <el-button
          type="danger"
          icon="el-icon-minus"
          @click="minus(index)"
          v-if="index !== 0"
        />
      </zm-form-item>
    </time-item>
</div>
  </zm-form>
</template>

<script>
import { WEEK_LIST } from '@/model'
import {timeTypeList, timeModel} from './const'
import cloudApi from '@/api/src/cloud'
import TimeItem from './TimeForm'
export default {
  name: 'HolidayTime',
  components: {TimeItem},
  props: {
    value: {
      type: Object,
      default: () => {
        return {
          timeType: '',
          timeData: {
            week: '',
            weekName: '',
            timeArray: [JSON.parse(timeModel)]
          }
        }
      }
    }
  },
  data () {
    return {
      timeTypeList,
      holidayList: [],
      weekList: WEEK_LIST,
      formRule: {
        timeType: {
          required: true,
          message: '必填',
          trigger: 'change'
        },
        'timeData.week': {
          required: true,
          message: '必填',
          trigger: 'change'
        }
      }
    }
  },
  computed: {
    form () {
      return this.value
    }
  },
  watch: {
    form: {
      handler (val) {
        this.$emit('input', val)
      },
      deep: true
    },
    'form.timeType' (val) {
      if (val === '4') {
        this.getHolidayList()
      }
    }
  },
  created () {
    this.getHolidayList()
  },
  methods: {
    async getHolidayList () {
      this.holidayList = await cloudApi.getHolidayList()
    },
    add (index) {
      this.form.timeData.timeArray.splice(index + 1, 0, JSON.parse(timeModel))
    },
    minus (index) {
      this.form.timeData.timeArray.splice(index, 1)
    },
    radioChange () {
      this.form.timeData.timeArray = [JSON.parse(timeModel)]
    },
    async validate () {
      const itemValdates = this.$refs.timeForm.map(item => {
        return item.validate()
      })
      return Promise.all([...itemValdates, this.$refs.form.validate()])
    },
    handleSetName (val, index) {
      const item = this.form.timeData.timeArray[index]
      this.$set(this.form.timeData.timeArray, index, {...item, holidayName: val})
    },
    handleSetWeekName (val) {
      const weekNameList = val.choosed.map(item => item.name)
      this.$set(this.form.timeData, 'weekName', weekNameList.join(','))
    }
  }
}
</script>
